<template>
  <el-container>
    <el-header class="header">
      <header
        class="el-header d-flex align-items-center"
        style="height: 60px; background: rgb(84, 92, 100)"
      >
        <a class="h5 text-light mb-0 mr-auto"> UNI-ADMIN </a>
        <ul
          role="menubar"
          class="el-menu--horizontal el-menu"
          style="background-color: rgb(84, 92, 100)"
        >
          <li 
            role="menuitem"
            tabindex="0"
            class="el-menu-item el-item"
            style="
              color: rgb(255, 208, 75);
              border-bottom-color: rgb(255, 208, 75);
              background-color: rgb(84, 92, 100);
            "
            v-for="(item, index) in $store.state.tree"
            :key="index"
            :class="{ 'is-active': index == $store.state.top }"
            @click="goitem(index,item)"
          >
            {{ item.name }}
          </li>

          <li
            role="menuitem"
            aria-haspopup="true"
            class="el-submenu"
            tabindex="0"
          >
            <div
              class="el-submenu__title"
              style="
                border-bottom-color: transparent;
                color: rgb(255, 255, 255);
                background-color: rgb(84, 92, 100);
              "
            >
              <span class="el-avatar el-avatar--small el-avatar--circle"></span>
              <span>admin</span>
              <div style="margin-left:20px" @click="add">退出</div>
            </div>
            
          </li>
        </ul>
      </header>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <ul role="menubar" class="el-menu" style="height: 100%">
          <li
            role="menuitem"
           
            tabindex="3"
            class="el-menu-item"
            style="padding-left: 20px"
            @click="goindex(inx)"
            v-for="(it, inx) in $store.state.tree[$store.state.top].child"
            :key="inx"
            :class="{ 'is-active': inx ==$store.state.left }"
          >
            <i class="el-icon-s-home"></i><span>{{ it.name }}</span>
          </li>
       
        </ul>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    goindex(inx) {
      const go =this.$store.state.tree[this.$store.state.top].child[inx].frontpath;
      this.$router.push(`/${go}`);
      this.$store.commit('setleft', inx)
    },
    goitem(index,item){
      this.$store.commit('settop', index)
      this.$router.push(`/${item.child[0].frontpath}`);
      this.$store.commit('setleft', 0)
    },
    add(){
       this.$store.commit('settoken','')
      this.$store.commit('settree',[])
       this.$router.push('/login')
    }
  },
  mounted(){
  }
};
</script>
<style scoped>
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid rgb(255, 208, 75) !important;
  color: rgb(255, 208, 75) !important;
  height: 56px !important;
}
.el-item:hover {
  background: rgb(67, 74, 80) !important;
}
.el-item {
  color: #fff !important;
  border: none !important;
}
.el-menu-item:hover {
  background-color: #e6f2f2;
  color: teal;
}
.is-active {
  background-color: #e6f2f2;
  color: teal !important;
}
.el-submenu {
  box-sizing: border-box;
}
.el-avatar--small {
  width: 28px;
  height: 28px;
  line-height: 28px;
  margin-right: 4px;
}
.el-submenu__title {
  height: 60px;
  line-height: 60px;

  border-bottom-color: transparent;
  color: rgb(255, 255, 255);
  background-color: rgb(84, 92, 100);
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  list-style: none;
  cursor: pointer;
  position: relative;
}
.header {
  padding: 0 !important;
}
.align-items-center {
  width: 100%;
}
.el-header {
  display: flex;
  align-items: center !important;
}
.text-light {
  color: #f8f9fa !important;
  flex: 1;
  font-weight: 500;
  line-height: 1.2;
  font-size: 1.25rem;
  text-align: left !important;
}
.text-light:hover {
  color: #cbd3da !important;
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
